<script>
import logo from '@/views/images/R-C.png'
export default {
  name:"Home",
  data() {
    return {
      logo:logo,
      activeIndex:"/desk",
      admin:'',
      userId:''
  }
  },
  methods: {
    //一进入页面就获取sessionStorage中的admin
    getAdmin() {
      this.admin = window.sessionStorage.getItem('admin')
      this.userId = window.sessionStorage.getItem('userId1')
      this.$root.admin2=this.admin
      this.$root.uid=this.userId
    },
    TuiChu(){
      window.sessionStorage.setItem('admin',null)
      window.sessionStorage.setItem('userId1',null)
      this.admin = window.sessionStorage.getItem('admin')   //null会直接转换string的"null"
      this.userId = window.sessionStorage.getItem('userId1')
      //清空全局变量的数据
      this.$root.admin2=this.admin
      this.$root.uid=this.userId
      this.$router.push("Login")
      this.$router.go(0)
      window.sessionStorage.clear()
    }
  },

  created() {
    this.getAdmin()
  }
}
</script>

<template>
  <div id="Home">
    <!-- -->
    <el-header>
      <!-- 导航菜单-->
      <el-menu :router="true"
               :default-active="activeIndex"
               class="el-menu-demo"
               mode="horizontal"
               style="height: 60px"
      >
        <el-menu-item index="/Home" >
          <!--logo -->
          <el-image
              style="width: 90px;height:50px"
              :src="logo"
              @click.native="$router.push(`/desk1`)"
          ></el-image></el-menu-item>

        <el-menu-item index="/desk2">全部商品</el-menu-item>
        <el-menu-item index="/desk3">购物车</el-menu-item>
        <el-menu-item index="/People">个人中心</el-menu-item>
        <!-- 登录注册/账户名称-->
        <el-menu-item  v-if="admin === null || admin==='' || admin==='null'" style="margin-left: 1050px">
<!--          <el-link @click="Login" >登录</el-link>-->
          <router-link to="/Login">登录</router-link>
        </el-menu-item>
        <el-menu-item  v-else style="margin-left: 1000px">
                    <el-link @click="TuiChu">退出账号</el-link>
        </el-menu-item>
        <el-menu-item v-if="admin === null || admin==='' || admin==='null'" style="margin-right: 10px;">
          <router-link to="/Zhuche">注册</router-link>
<!--          <el-link @click="Zhuche">注册</el-link>-->
        </el-menu-item>
        <h2  class="color11"  v-else style="margin-right: 10px;margin-top: 0px">欢迎您！{{admin}}</h2>
      </el-menu>
    </el-header>
    <!-- 中间部分/路由-->
    <el-main>
      <router-view></router-view>
    </el-main>
  </div>
</template>

<style>
.color11{
  color: lightskyblue;
  font-style:italic;
  text-align: right;
}

</style>